

<div class="box box-primary">
	<div class="box-body">
	    <!-- tool -->
	    <div class="box-body" style="width: 100%">
		<div class="row">
			
			<div class="col-xs-3">
			<div class="input-group">
                 <span class="input-group-addon" id="sizing-addon1">文件名称</span>
                    <input id="fileName" name="fileName" type="text" class="form-control" aria-describedby="sizing-addon1">
             </div>			
			</div>

			<div class="col-xs-1" style="width: 100px;">
				<button type="button" class="btn btn-block btn-default"
					onclick="condictionsSearch()">
					<i class="fa fa-search"></i> 搜索
				</button>
			</div>

			<div class="col-xs-1" style="width: 100px;">
				<button type="button" class="btn btn-block btn-primary"
					onclick="emptyCondition()">
					<i class="fa fa-trash"></i> 清空
				</button>  
			</div>
			
			<!-- <div class="col-xs-1" style="width: 100px;">
				<button type="button" class="btn btn-success" id="add">
					<i class="fa fa-plus-circle fz"></i> 新增
				</button>
			</div>
			
			<div class="col-xs-1" style="width: 100px;">
				<button class="btn btn-danger" id="del">
				<i class="fa fa-trash"></i> 删除</button>
			</div>
			
			<div class="col-xs-1" style="width: 100px;">
				<button class="btn btn-warning" id="edit">
				<i class="glyphicon glyphicon-pencil"></i> 编辑</button>
			</div> -->
		</div>
		</div>
		
				<div class="box-header with-border">
				  <div class="box-body" style="width: 100%">
					<div class="row">
						<#list btnlist as items>
							<button class="${items.funcBg!}" id="${items.funcCode!}">
							<i class="${items.funcIcon!}"></i> ${items.funcName!}</button>
						
						</#list>
						
					</div>
				</div>	
				</div>
		
		<!-- table -->
		<div id="theexampleArea">
			<table id="table_form"
					class="table table-bordered table-striped table-hover"
					cellspacing="0" width="100%">
				</table>
		</div>
	</div>
</div>

<script
	src="${request.contextPath}/lib/plugins/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript"
	src="${request.contextPath}/js/Form_data_Submit.js"></script>

<script>
	var timer = null;
	// 表格行选择数组
	var rows_selected = [];

	var table = $('#table_form').DataTable(
					{
						ajax : {
							"url" : contextPath
									+ "/soa/files/type/datas/search",
							"type" : "post",
							"dataType" : "json",
							"data" : function(d) {

							}
						},
						sPaginationType : "full_numbers",
						ordering : false,
						info : false,
						scrollX : false,
						scrollY : '50vh',
						processing : false,
						serverSide : true,
						paging : true,
						pageLength : 10,
						pagingType : "full_numbers",//number simple simple_numbers full 默认full_numbers
						lengthChange : false, //可变分页组件,下行可规定显示页数，左边是定义，右边是页面显示的效果（如-1就是搜全部，但页面显示的选项是ALL）
						//"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
						searching : false,
						language : {
							sProcessing : "正在加载中......",
							sLengthMenu : "每页显示 _MENU_ 条记录",
							sInfo : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
							sZeroRecords : "对不起，查询不到相关数据！",
							sEmptyTable : "表中无数据存在！",
							search : "查询:",
							paginate : {
								previous : "上一页",
								next : "下一页",
								first : "第一页",
								last : "最后一页"
							}
						},
						columns : [
								{
									title : '<input name="select_all" type="checkbox">',
									width:"5%",
									data : function(e) {//这里给最后一列返回一个操作列表
												return '<input value="'+e.id+'" type="checkbox">';
											}
								},
								{
									title : '文件名',
									width : "40%",
									data : 'fileName',
									align : 'center',
									valign : 'middle'
								},
								{
									title : '文件要求',
									width : "30%",
									data : 'fileRequire',
									align : 'center',
									valign : 'middle'
								}]
					});






	//----------------------------------------------以下为首列复选框相关Js------------------------------------------------------
	//处理 checkbox 点击事件
	$('#table_form tbody').on('click', 'input[type="checkbox"]', function(e) {
		var $row = $(this).closest('tr');

		// 获取行数据
		var data = table.row($row).data();

		// 获取行id
		var rowId = data[0];

		// 
		var index = $.inArray(rowId, rows_selected);

		// If checkbox is checked and row ID is not in list of selected row IDs
		if (this.checked && index === -1) {
			rows_selected.push(rowId);

			// Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
		} else if (!this.checked && index !== -1) {
			rows_selected.splice(index, 1);
		}

		if (this.checked) {
			$row.addClass('selected');
		} else {
			$row.removeClass('selected');
		}

		//更新表格选择状态
		updateDataTableSelectAllCtrl(table);

		e.stopPropagation();
	});



	//更新表格 单选 全选状态
	function updateDataTableSelectAllCtrl(table) {
		var $table = table.table().node();
		var $chkbox_all = $('tbody input[type="checkbox"]', $table);
		var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
		var chkbox_select_all = $('thead input[name="select_all"]', $table)
				.get(0);

		// 没有选中
		if ($chkbox_checked.length === 0) {
			chkbox_select_all.checked = false;
			if ('indeterminate' in chkbox_select_all) {
				chkbox_select_all.indeterminate = false;
			}

			// 全部选中
		} else if ($chkbox_checked.length === $chkbox_all.length) {
			chkbox_select_all.checked = true;
			if ('indeterminate' in chkbox_select_all) {
				chkbox_select_all.indeterminate = false;
			}

			// 部分选中
		} else {
			chkbox_select_all.checked = true;
			if ('indeterminate' in chkbox_select_all) {
				chkbox_select_all.indeterminate = true;
			}
		}
	}


	//----------------------------------------------以上为首列复选框相关Js------------------------------------------------------


	// 处理表格单元格单击复选框 如果需要...（暂时不知道用上了没，兴斌预留）
	$('#table_form').on('click', 'tbody td, thead th:first-child', function(e) {
		$(this).parent().find('input[type="checkbox"]').trigger('click');
	});

	// 表格全选
	$('thead input[name="select_all"]', table.table().container()).on(
			'click',
			function(e) {
				if (this.checked) {
					$('#table_form tbody input[type="checkbox"]:not(:checked)')
							.trigger('click');
				} else {
					$('#table_form tbody input[type="checkbox"]:checked').trigger(
							'click');
				}

				e.stopPropagation();
			});



	//child row 事件

	$('#table_form').on('click', 'td.details-control', function () {
	    var tr = $(this).closest('tr');
	    var row = table.row( tr );

	    if ( row.child.isShown() ) {
	        // This row is already open - close it
	        row.child.hide();
	        tr.removeClass('shown');
	    }
	    else {
	        // Open this row
	        row.child( format1(row.data()) ).show();
	        tr.addClass('shown');
	    }
	} );



	//操作方法
	$(function(){

		//新增
		$('#add').on('click',function(){
			post("/soa/files/fileType/inst", "html", "", function(obj) {
				var d = dialog({
					title : '新增文件',
					content : obj,
					width : 550,
					okValue : '保存',
					zIndex : 999999,
					ok : function() {
						this.title('正在提交..');
						ajaxSubmit($('#form_FileType')[0], function(data) {
							if (data.status == 0) {
								var d = dialog({
									content : data.msg
								});
								d.show();
								setTimeout(function() {
									d.close().remove();
								}, 4000);
								table.ajax.reload(null, false);//刷新表格
							} else {
								var d = dialog({
									content : data.msg
								});
								d.show();
								setTimeout(function() {
									d.close().remove();
								}, 4000);
							}
						});
						cancel: false
					},
					cancelValue : '取消',
					cancel : function() {
					}
				});
				d.showModal();
			});
    		
    	});


		//修改文件
		$('#edit').on('click',function(){
			var $table = table.table().node();
			var $chkbox_all = $('tbody input[type="checkbox"]', $table);
			var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
			if($chkbox_checked.length<1){
				var d = dialog({
					title:'提示',
					content : '请勾选要修改的记录！'
				});
				d.show();
				setTimeout(function() {
					d.close().remove();
				}, 2000);
			}else if($chkbox_checked.length>1){
				var d = dialog({
					title:'提示',
					content : '请不要勾选多条记录修改！'
				});
				d.show();
				setTimeout(function() {
					d.close().remove();
				}, 2000);
			}else{
				var data={"id":$chkbox_checked.val()};
				var id=$chkbox_checked.val();
			post("/soa/files/fileType/edit", "html", data, function(obj) {
				var d = dialog({
					title : '编辑文件',
					content : obj,
					width : 550,
					okValue : '保存',
					zIndex : 999999,
					ok : function() {
						this.title('正在提交..');
						ajaxSubmit($('#form_FileType')[0], function(data) {
							if (data.status == 0) {
								var d = dialog({
									content : data.msg
								});
								d.show();
								setTimeout(function() {
									d.close().remove();
								}, 4000);
								table.ajax.reload(null, false);//刷新表格
							} else {
								var d = dialog({
									content : data.msg
								});
								d.show();
								setTimeout(function() {
									d.close().remove();
								}, 4000);
							}
						});
						cancel: false
					},
					cancelValue : '取消',
					cancel : function() {
					}
				});
				d.showModal();
			});
			}

        });

        //删除配件
        $('#del').on('click',function(){
        	var $table = table.table().node();
    		var $chkbox_all = $('tbody input[type="checkbox"]', $table);
    		var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
    		if($chkbox_checked.length<1){
    			var d = dialog({
    				title:'提示',
    				content : '请勾选要修改的记录！'
    			});
    			d.show();
    			setTimeout(function() {
    				d.close().remove();
    			}, 2000);
    		}else if($chkbox_checked.length>1){
    			var d = dialog({
    				title:'提示',
    				content : '请不要勾选多条记录修改！'
    			});
    			d.show();
    			setTimeout(function() {
    				d.close().remove();
    			}, 2000);
    		}else{
    			var data={"id":$chkbox_checked.val()};
    			var id=$chkbox_checked.val();
    			$.ajax({
    				async : false,
    				url : contextPath + "/soa/files/fileType/datas/del",
    				data : {
    					id : id
    				},
    				type : "post",
    				dataType : "json",
    				success : function(result) {
    					if (result.status == 0) {
    						var d = dialog({
    							content : result.msg
    						});
    						d.show();
    						setTimeout(function() {
    							table.ajax.reload(null, false);
    							d.close().remove();
    						}, 2000);
    					} else {
    						var d = dialog({
    							content : result.msg
    						});
    						d.show();
    						setTimeout(function() {
    							d.close().remove();
    						}, 4000);
    					}
    				},
    			});
    		}

        });

	});


	//清空查询条件
	function emptyCondition() {
		$("#fileName").val("");
		condictionsSearch();
	}
	//条件查询配件数据
	function condictionsSearch() {

		var fileName = $("#fileName").val();
		var url = contextPath + "/soa/files/type/datas/search";
		var data = {};
		data.fileName = fileName;

		table.settings()[0].ajax.url = url;
		table.settings()[0].ajax.data = {
			"params" : data
		};
		table.ajax.reload();
	}
</script>


<!-- <script type="text/javascript">  

    j = 1;  
    $(document).ready(function(){  
          

        $("#btn_add2").click(function(){  
            document.getElementById("newUpload2").innerHTML+='<div id="div_'+j+'"><input  name="file_'+j+'" type="file"  /><input type="button" value="删除"  onclick="del_2('+j+')"/></div>';  
              j = j + 1;  
        });  
    });  

      
    function del_2(o){  
         document.getElementById("newUpload2").removeChild(document.getElementById("div_"+o));  
    }  
  
</script>  
 
    <form name="userForm2" action="${request.contextPath}/soa/files/upload" enctype="multipart/form-data" method="post">  
        <div id="newUpload2">  
            <input type="file" name="file">  
        </div>  
        <input type="button" id="btn_add2" value="增加一行" >  
        <input type="submit" value="上传" >  
    </form> -->

<style>

</style>